<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head th:replace="home/public/head::head(~{::title},~{::style},~{})">
    <title>全部新闻-新闻管理系统</title>
    <style>
        .name-date span{
            padding: 0px 10px;
        }
        .list-top{
            display: flex;
            flex-direction: row;
            align-items: center;
            min-height: 50px;
            margin: 20px 0px;
            background-color: rgb(242, 242, 242);
        }
        .list-top-btn{
            width: 20%;
            padding-left: 5%;
        }
        .list-top-category{
            width: 100%;
            position: relative;
            display: block;
            padding: 10px 15px;
            margin-bottom: -1px;
            background-color: #fff;
        }
        .list-top-btn a{
            padding: 10px 20px;
            font-size: 20px;
            height: 50px;
        }
        input::-webkit-input-placeholder {
            color: #aab2bd;
            font-size: 20px;
            text-align: center;
        }
        .list-top-search{
            position: relative;
            padding:20px 0px;
            width: 80%;
        }
        .list-top-search input{
            width: 80%;
            height: 50px;
            border: 2px solid #a24ce3;
            border-radius: 20px;
        }
        .list-top-search input,i{
            height: 50px;
        }
        .layui-icon {
            font-family: layui-icon!important;
            font-size: 20px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .my-search-icon{
            position: absolute;
            top:28%;
            right: 22%;
            font-size: 30px;
            cursor: pointer;
        }


        .layui-container {
            width: 90%;
        }
        .layui-card-header {
            position: relative;
            height: 42px;
            line-height: 42px;
            padding: 0 15px;
            border-bottom: 1px solid #f6f6f6;
            color: #333;
            border-radius: 2px 2px 0 0;
            font-size: 15px;
        }
        .layui-card-body {
            position: relative;
            padding: 10px 15px;
            line-height: 24px;
            border-bottom: 2px solid #e0e0e0;
        }
        .head-img-box{
            height: 300px;
        }
        .head-img{
            max-height: 100%;
            width: 100%;
        }
        .text-overflow{
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 4;
            overflow: hidden;
            width: 100%;
            margin-top: 15px;
            margin-bottom: 15px;
            height: 40px;
        }
        .clickTitle{
            background-color: #337ab7;
            color: white;
            font-size: 18px;
        }

        .category{
            margin: 0px 20px;
            cursor: pointer;
        }
        .mycontent{
            display: flex;
            flex-direction: row;
            align-items: flex-start;
            width: 100%;
        }
        .content-left{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 10%;
            border: 2px solid #393D49;
            min-height: 400px;
        }
        .content-left span{
            margin: 10px 0px;
            padding: 15px 15px;
            font-size: 15px;
            width: 100%;
            text-align: center;
        }
        .content-right{
            margin-left: 1%;
            width: 89%;
        }
        .right-top{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            max-height: 300px;
        }
        .right-bottom{
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
            margin: 10px 0px;
        }
        .content-title{
            width: 100%;
            font-size: 20px;

        }
    </style>
</head>
<body>

<!--顶部导航栏导入-->
<div th:replace="home/public/top-menu::top-menu"></div>
<div class="layui-container" id="container" v-cloak style="min-height: 70%">
    <input type="hidden" name="loginUser" id="loginUser" th:value="${session.user.id}" th:if="${session.user!=null}" />

    <div class="list-top">
        <div class="list-top-btn">
            <a href="/home/news/homeAddPage" class="layui-btn layui-btn-sm" role="button">发布新闻</a>
        </div>
        <div class="list-top-search">
            <input type="search"  @click="searchList()" name="newsTitle" id="newsTitle" autocomplete="off" placeholder="请输入新闻标题"/>
            <i class="layui-icon layui-icon-search my-search-icon"  @click="searchList()" ></i>
        </div>
    </div>

    <div class="layui-row">
        <div class="mycontent">
            <div class="content-left">
                <span name="newsTitle" v-bind:data-id="0" @click="changeCategory(0)" class="category clickTitle">全部新闻</span>
                <span @click="changeCategory(item.id)" name="newsTitle" v-bind:data-id="item.id"
                      class="category" v-for="item in categoryList">{{item.name}}</span>
            </div>
            <div class="content-right">
                <div class="right-top" v-if="newsList.length<1">
                    <div class="layui-col-md12" style="height: 300px;text-align: center">
                        <img style="max-height: 100%" th:src="@{/common/images/nodata1.jpg}">
                    </div>
                </div>
                <div class="right-bottom">
                    <div class="layui-col-md12">
                        <div v-if="newsList.length>0"  style="padding: 20px; background-color: #F2F2F2;">


                            <div  class="layui-row layui-col-space15" style="min-height: 300px">
                                <div v-for="item in newsList" class="list-group-item">
                                    <a th:title="查看新闻详情" :href="'/home/news/homeDetail/'+item.id" style="color: #393D49">
                                        <span style="width: 400px;display: inline-block;margin-right: 50px">{{item.title}}</span>
                                        <span>{{item.theme.length>60?item.theme.substring(0,60)+'....':item.theme}}</span>
                                        <span class="pull-right">{{item.createTime}}</span>
                                    </a>
                                </div>
                            </div>


                            <div class="layui-row text-center" >
                                <div id="laypage"></div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>


<!-- 底部导航栏 start-->
<footer th:replace="home/public/footer::footer"></footer>
<!-- 底部导航栏end -->

<script th:src="@{/static/common/plugs/vue/vue.js}"></script>
<script th:inline="javascript">

    /*初始化layui的分页插件*/
    function initLayui() {
        layui.use('laypage', function () {
            var laypage = layui.laypage;
            //执行一个laypage实例
            laypage.render({
                elem: 'laypage' //注意，这里的 test1 是 ID，不用加 # 号
                , count: totalCount //数据总数，从服务端得到
                , limit: pageSize //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                , limits: [12, 24, 36, 48, 60] //每页条数的选择项。如果 layout 参数开启了 limit，则会出现每页条数的select选择框
                , layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                , jump: function (obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    pageSize = obj.limit;
                    pageIndex = obj.curr;
                    //首次不执行
                    if (!first) {
                        pagination(obj.curr, obj.limit);
                    }
                }
            });
        });
    }

    var that = this;
    var app = new Vue({
        el: "#container",
        data: {
            newsList: ""
            ,categoryList: ""
            ,initLayui: false//是否可以渲染layui，请求到数据后才可以
        },
        methods:{
            searchList:function () {
                searchList();
            },
            getCategoryList: function () {
                $.get("/home/category/list/1/1000",function (res) {
                    app.$data.categoryList = res.data.categoryList;
                });
            },
            getNewsList: function () {
                $.get("/home/news/list/1/1000",function (res) {
                    app.$data.newsList = res.data.newsList;
                });
            },
            changeCategory:function (id) {
                $.post("/home/news/list/1/12?categoryId="+(id==0?'':id),{"title":$("#newsTitle").val()},function (res) {
                    app.$data.newsList = res.data.newsList;
                })
                $("span[name='newsTitle']").each(function (index) {
                    var dataId = $(this).attr("data-id");
                    if(dataId==id){
                        $(this).addClass("clickTitle");
                    }else{
                        $(this).removeClass("clickTitle")
                    }
                });
                if(id==0){
                    $(this).addClass("clickTitle");
                }
            }
        },
        watch: {//监听data中的数据变化
            'initLayui': function (newVal) {
                if (newVal)
                    that.initLayui();
            }
        }
    });

    var pageIndex = 1;
    var pageSize = 20;
    var totalCount = 12;
    /*异步请求用户数据*/
    function pagination(pageIndex, pageSize) {
        var requestPath = "/home/news/list/" + pageIndex + "/" + pageSize+"?title="+$("#newsTitle").val() ;
        $.get(requestPath, function (res) {
            totalCount = res.data.pageInfo.total;
            app.$data.newsList = res.data.newsList;
            app.$data.initLayui = true;
        });
    };

    /*获取列表*/
    pagination(pageIndex, pageSize);
    function searchList() {
        var requestPath = "/home/news/list/" + pageIndex + "/" + pageSize+"?title="+$("#newsTitle").val() ;
        $.get(requestPath, function (res) {
            totalCount = res.data.pageInfo.total;
            app.$data.newsList = res.data.newsList;
            app.$data.initLayui = true;
        });
    }
    app.getCategoryList();
    app.getNewsList();
</script>
</body>
</html>
